﻿import QtQuick 2.0

Item {
    id: control
    width: 220
    height: 220

    property real radius: control.width > control.height ? control.height/2-20 : control.width/2-20
    property real length: control.width > control.height ? control.height/2-10 : control.width/2-10
    property real current_gear
    property real currentSpeed: 0
    property real maxSpeed: 270
    property real gear_direction
    property real engineTep: 0
    property real warnEngineTep: 100

    property real currentDeep: 0
    property real maxDeep: 200

    property real allAngle: 270
    property real stepAngle: 4.5

    property double startAngle: 45
    property double endAngle: 135
    property double startRadian: startAngle/180*Math.PI
    property double endRadian: endAngle/180*Math.PI

    property color backgroundColor: "#212527"
    property color lineColor: "#00FFFF"

    property color btm_backgroundColor: "#1AA1A1"
    property color top_backgroundColor: "#00FFFF"

    property string engineTepIcon: "qrc:/imgs/engine_tel.png"
    property string engineTepWarnIcon: "qrc:/imgs/engine_tel_2.png"

    property string downBackIcon: "qrc:/imgs/down_back.png"

    onCurrentSpeedChanged: {
        canvas.requestPaint()
    }

    onGear_directionChanged: {
        canvas.requestPaint()
    }

    onCurrent_gearChanged: {
        canvas.requestPaint()
    }

    Canvas {
        id: canvas
        antialiasing: true
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset();
            ctx.lineWidth = 3
            ctx.strokeStyle = control.backgroundColor
            ctx.fillStyle = control.backgroundColor
            ctx.font = "20px SimHei bold"
            ctx.lineCap = "round"
            ctx.translate(width/2, height/2)

            drawSpeed(ctx)
            drawOil(ctx)
        }

        onImageLoaded: requestPaint()

        Component.onCompleted: {
            loadImage(engineTepIcon)
            loadImage(engineTepWarnIcon)
            loadImage(downBackIcon)
        }

        function drawSpeed(ctx){
            //绘制外面
            ctx.save()
            ctx.beginPath()
            ctx.arc(0,0,control.radius,0,Math.PI*2,true)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            //绘制内圆
            ctx.save()
            ctx.strokeStyle = lineColor
            ctx.fillStyle = "white"
            ctx.beginPath()
            ctx.arc(0,0,3,0,Math.PI*2,true)
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            //绘制刻度
            ctx.save()
            ctx.rotate(Math.PI/4)
            ctx.lineWidth = 1.3
            for (var i=0; i<=allAngle;i+=stepAngle){
                if(i%5==0){
                    ctx.strokeStyle = "white"
                    ctx.beginPath()
                    ctx.moveTo(0,control.radius)
                    ctx.lineTo(0,control.radius-6)
                }
                else{
                    if(i < allAngle * (control.currentSpeed/maxSpeed)){
                        ctx.strokeStyle = lineColor
                    }else if(i > allAngle - 45){
                        ctx.strokeStyle = "red"
                    }else{
                        ctx.strokeStyle = "grey"
                    }
                    ctx.beginPath()
                    ctx.moveTo(0,control.radius)
                    ctx.lineTo(0,control.radius-3)
                }
                ctx.rotate(stepAngle / 180 * Math.PI)
                ctx.stroke()
            }
            ctx.restore()


            //绘制指针
            ctx.save()
            ctx.lineWidth = 3
            ctx.strokeStyle = lineColor
            ctx.rotate(Math.PI/4)
            ctx.rotate(stepAngle * (control.currentSpeed/maxSpeed))
            ctx.beginPath()
            ctx.moveTo(0,-14)
            ctx.lineTo(0,control.radius)
            ctx.stroke()
            ctx.restore()

            //绘制当前速度值
            ctx.save()
            ctx.fillStyle = "white"
            ctx.font = "40px SimHei bold"
            ctx.textAlign = "center"
            if(gear_direction==0)
                ctx.fillText("N",0,control.radius-30)
            else if(gear_direction==1)
            {
                ctx.fillText("D",0,control.radius-30)
                ctx.font = "20px SimHei bold"
                ctx.fillText(String(current_gear),20,control.radius-30)
            }
            else if(gear_direction==2)
            {
                ctx.fillText("R",0,control.radius-30)
                ctx.font = "20px SimHei bold"
                ctx.fillText(String(current_gear),20,control.radius-30)
            }


            ctx.restore()

            ctx.save()
            ctx.fillStyle = "#8C8C8C"
            ctx.font = "15px SimHei bold"
            ctx.textAlign = "center"
            ctx.fillText(String(engineTep) + " ℃", 0, -control.radius+60)
            ctx.restore()

            if(engineTep > warnEngineTep){
                ctx.drawImage(engineTepWarnIcon, -10, -control.radius+20)
            }else{
                ctx.drawImage(engineTepIcon, -10, -control.radius+20)
            }

        }

        function drawOil(ctx){
            var startRadian = 45/180*Math.PI
            var endRadian = 135/180*Math.PI

            ctx.save()
            ctx.lineWidth = 8;
            ctx.lineCap = "round"
            ctx.strokeStyle = btm_backgroundColor;
            ctx.beginPath();
            ctx.arc(0, 0, length, startRadian, endRadian);
            ctx.stroke();
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 8;
            //            ctx.lineCap = "round"
            ctx.strokeStyle = top_backgroundColor;
            ctx.beginPath();
            if(currentDeep >= 0){
                ctx.arc(0, 0, length, Math.PI/2 - currentDeep/maxDeep * Math.PI/4, Math.PI/2);
            }else{
                ctx.arc(0, 0, length, Math.PI/2, Math.PI/2 - currentDeep/maxDeep * Math.PI/4);
            }
            ctx.stroke();
            ctx.restore()

            ctx.save()
            ctx.fillStyle = "black"
            ctx.font = "15px SimHei bold"
            ctx.textAlign = "center"
            ctx.fillText(String(currentDeep), length - 5, length - 5)
            ctx.restore()

            ctx.drawImage(downBackIcon, length - 20, length - 40)
        }
    }
}
